<template>
	<view>
		<view class="">
			<view class="form-box-production">
				<view class="pro-item" @click="fnSelect('project')">
					<text class="item-label">项目/基地</text>
					<text class="item-value long" v-if="form.projectBaseName">{{ form.projectBaseName }}</text>
					<text class="item-value-placeholder" v-else="form.projectBaseName">请选择项目/基地</text>
				</view>
				<view class="pro-item" @click="fnSelect('site')" v-if="form.projectBaseType !== '基地' && form.projectBaseType !== '高端加固' ">
					<text class="item-label">区间/站点</text>
					<text class="item-value" v-if="form.lineSiteSectionName">{{ form.lineSiteSectionName }}</text>
					<text class="item-value-placeholder" v-else>请选择区间/站点</text>
				</view>
				<view class="pro-item">
					<text class="item-label">检查日期</text>
					<view class="item-value" @click="datePopup = true">
						<text>{{ getDate(form.checkDate) }}</text>
						<view class="item-time">
							<u-icon name="arrow-down" size="18"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="space-box"></view>
			<view class="form-box-production">
				<view class="item-picture-title">
					<text>消防器材巡视记录表</text>
					<view class="picture-box">
						<u-upload :fileList="recordListImg" @afterRead="uploadImage($event, 'record')" @delete="deleteImage($event, 'record')" name="Img" multiple
							:maxCount="9" :previewFullImage="true" accept="image" width="200rpx" height="200rpx"></u-upload>
					</view>
				</view>
			</view>
			<view class="space-box"></view>
			<view class="form-box-production">
				<view class="item-picture-title">
					<text>现场灭火器配备照片</text>
					<view class="picture-box">
						<u-upload :fileList="equipListImg" @afterRead="uploadImage($event, 'equip')" @delete="deleteImage($event, 'equip')" name="Img" multiple
							:maxCount="9" :previewFullImage="true" accept="image" width="200rpx" height="200rpx"></u-upload>
					</view>
				</view>
			</view>
			<view class="space-box"></view>
			<view class="form-box-production">
				<view class="item-picture-title">
					<text>用电安全巡视记录表</text>
					<view class="picture-box">
						<u-upload :fileList="safetyListImg" @afterRead="uploadImage($event, 'safety')" @delete="deleteImage($event, 'safety')" name="Img" multiple
							:maxCount="9" :previewFullImage="true" accept="image" width="200rpx" height="200rpx"></u-upload>
					</view>
				</view>
			</view>
		</view>
		<!-- 选择项弹窗 -->
		<u-datetime-picker @cancel="datePopup=false" @confirm="dateConfirm" :maxDate="new Date().getTime()"
			:show="datePopup" v-model="dateTime" mode="date"></u-datetime-picker>
		<view class="footer-button">
			<view class="button-placeholder"></view>
			<view class="button-group">
				<button @click="submit" :loading="isLoading" class="button-primary">提交</button> 
			</view>
		</view>
	</view>
</template>
<script>
	import mixins from "@/utils/mixins.js"
	import { imgFun } from "@/utils/common.js";
	import { uploadFile } from '@/utils/request'
	import {fireSafetySave} from "@/api/qualitySafetyManagement/qualitySafetyManagement.js"
	export default {
		name:'production_form',
		mixins: [mixins],
		data() {
			return {
				form:{
					checkDate:Number(new Date()), 
					lineId:null,
					lineSiteSectionId:null,
					lineSiteSectionName:null,
					lineSiteSectionType:null,
					projectBaseId:null,
					projectBaseName:null,
					projectBaseType:'工程维保',
					electricalSafetyDocId:null,		//用电安全巡视图片
					extinguisherDocId:null,			//现场灭火器配备照片
					fireEquipmentDocId:null			//消防器材巡视图片
					
				},
				recordListImg:[],
				equipListImg:[],
				safetyListImg:[],
				datePopup:false,
				dateTime:Number(new Date()), 
				isLoading:false,
				typeObj :{
					'工程维保':'project_base_type_gcwb',
					'综合大修':'project_base_type_zhdx',
					'基地':'project_base_type_jd',
					'高端加固':'project_base_type_mjs'
				}
			}
		},
		mounted() {
			this.dateTime = this.getDate(this.dateTime)
		},
		methods: {
			fnSelect(type) {
				if(type === 'project') {
					uni.navigateTo({
						url:`/subpackage-plasmosafety/pages/qualitySafetyManagement/components/projectOrStation?projectOrBaseType=${this.form.projectBaseType}`,
						events: {
							setData: (data) => {
								console.log(data.data, '项目/基地');
								let result = data.data
								this.$set(this.form,'projectBaseName',result.name)
								this.$set(this.form,'projectBaseType',result.type)
								this.$set(this.form,'projectBaseId',result.id)
								this.form.lineSiteSectionName = null
							}
						},
					})
				}else {
					if(!this.form.projectBaseName) {
						return uni.showToast({
							title:'请先选择项目/基地',
							icon:'none',
							mask:true
						})
					}
					let objType = this.form.projectBaseType === '工程维保' ? 'gcwb' : 'zhdx'
					uni.navigateTo({
						url:`/subpackage-plasmosafety/pages/qualitySafetyManagement/components/intervalOrSite?objId=${this.form.projectBaseId}&objType=${objType}`,
						events: {
							setIntervalData: (data) => {
								console.log(data.data, '区间站点');
								let result = data.data
								this.$set(this.form,'lineId',result.lineId)
								this.$set(this.form,'lineSiteSectionId',result.lineSiteSectionId)
								this.$set(this.form,'lineSiteSectionName',result.lineSiteSectionName)
								this.$set(this.form,'lineSiteSectionType',result.lineSiteSectionType)
							}
						},
					})
				}
				
			},
			async uploadImage(event,type) {
				for(var item in event.file){
					if(event.file[item].type == 'image'){
						event.file[item].url = await imgFun(event.file[item])
						event.file[item].thumb = await imgFun(event.file[item])
					}
					if(type === 'record') {
						this[`recordList${event.name}`].push({
							...event.file[item],
							status: 'success',
							message: ''
						})
					}else if(type === 'equip') {
						this[`equipList${event.name}`].push({
							...event.file[item],
							status: 'success',
							message: ''
						})
					}else if(type === 'safety') {
						this[`safetyList${event.name}`].push({
							...event.file[item],
							status: 'success',
							message: ''
						})
					}else {
						throw new Error('上传图片类型错误！')
					}
					
				}
			},
			deleteImage(event, type) {
				if(type === 'record'){
					this[`recordList${event.name}`].splice(event.index, 1)
				}else if(type === 'equip') {
					this[`equipList${event.name}`].splice(event.index, 1)
				}else if(type === 'safety') {
					this[`safetyList${event.name}`].splice(event.index, 1)
				}else {
					throw new Error('删除图片类型错误！')
				}
				
			},
			dateConfirm(val) {
				this.form.checkDate = this.getDate(val.value)
				this.datePopup = false
			},
			validateRequired() {
				if(!this.form.projectBaseName) {
					uni.showToast({
						title:'请选择项目/基地',
						icon:'none',
						mask:true
					})
					return false
				}
				if(this.form.projectBaseType !== '基地' && this.form.projectBaseType !== '高端加固') {
					if(!this.form.lineSiteSectionName) {
						uni.showToast({
							title:'请选择区间/站点',
							icon:'none',
							mask:true
						})
						return false
					}
				}
				if(!this.form.checkDate) {
					uni.showToast({
						title:'请选择检查日期',
						icon:'none',
						mask:true
					})
					return false
				}
				
				if(this.recordListImg.length === 0) {
					uni.showToast({
						title:'请上传消防器材巡视记录照片',
						icon:'none',
						mask:true
					})
					return false
				}
				if(this.equipListImg.length === 0) {
					uni.showToast({
						title:'请上传现场灭火器配备照片',
						icon:'none',
						mask:true
					})
					return false
				}
				if(this.safetyListImg.length === 0) {
					uni.showToast({
						title:'请上传用电安全巡视记录照片',
						icon:'none',
						mask:true
					})
					return false
				}
				return true
			},
			async submit() {
				
				if(!this.validateRequired()) return
				if(this.isLoading) return
				this.isLoading = true
				//消防器材巡视记录表
				let fileList1 = [...this.recordListImg]
				for (let item of fileList1) {
					let formData = {}
					if (this.form.fireEquipmentDocId) {
						formData.docId = this.form.fireEquipmentDocId
					}
					let data = await uploadFile({
						url: "rest/doc/uploadDoc",
						formData,
						filePath:item.url
					})
					let res = JSON.parse(data)
					if (!res.success){
						this.isLoading = false
						return
					}
					this.form.fireEquipmentDocId = res.result.id
					
				}
				
				//现场灭火器
				let fileList2 = [...this.equipListImg]
				for (let item of fileList2) {
					let formData = {}
					if (this.form.extinguisherDocId) {
						formData.docId = this.form.extinguisherDocId
					}
					let data = await uploadFile({
						url: "rest/doc/uploadDoc",
						formData,
						filePath:item.url
					})
					let res = JSON.parse(data)
					if (!res.success){
						this.isLoading = false
						return
					}
					this.form.extinguisherDocId = res.result.id
				}
				
				//用电安全巡视记录表
				let fileList3 = [...this.safetyListImg]
				for (let item of fileList3) {
					let formData = {}
					if (this.form.electricalSafetyDocId) {
						formData.docId = this.form.electricalSafetyDocId
					}
					let data = await uploadFile({
						url: "rest/doc/uploadDoc",
						formData,
						filePath:item.url
					})
					let res = JSON.parse(data)
					if (!res.success){
						this.isLoading = false
						return
					}
					this.form.electricalSafetyDocId = res.result.id
				}
				this.form.projectBaseType = this.typeObj[this.form.projectBaseType] 
				// console.log(this.form,'---入参---');
				// return
				let res = await fireSafetySave({...this.form})
				if(res.success) {
					uni.showToast({
						title:res.message,
						icon:'none',
						mask:true,            
					})
					this.form = {}
					this.dateTime = Number(new Date())
					this.recordListImg = []
					this.equipListImg = []
					this.safetyListImg = []
					this.form.checkDate = Number(new Date())
					this.form.projectBaseType='工程维保'
					 this.isLoading = false
				}else {
					this.isLoading = false
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.form-box-production {
		padding: 0 40rpx;
		background: #fff;
		.pro-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			padding: 30rpx 0;
			border-bottom: 4rpx solid #f4f6f9;
			.item-label ::before {
				content: "*";
				color: #FF6A6A ;
			}
			.item-label {
				font-size: 32rpx;
			}
			.item-value {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 32rpx;
				font-weight: bold;
				color: #22204E;
				.item-time {
					margin-left: 30rpx;
					// padding-top: 10rpx;
				}
				.unit {
					margin-left: 10rpx;
				}
			}
			.item-value.long {
				display: block;
				max-width: 200px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.item-value-placeholder {
				font-size: 30rpx;
				font-weight: bold;
				color: #c0c4cc;
			}
		}
		
		.item-picture-title {
			padding: 30rpx 0;
			text {
				font-size: 32rpx;
			}
			text ::before{
				content: "*";
				color: #FF6A6A ;
			}
			.picture-box {
				margin-top: 20rpx;
			}
			
		}
	}
	.space-box {
		background-color: #f5f7fb;
		height: 40rpx;
	}
/deep/ .uni-input-placeholder {
	padding-left: 160rpx;
}
/deep/ .uni-input-input{
	text-align: right;
}
.outer-btn {
			height: 100rpx;

			.button {
				height: 92rpx;
				line-height: 92rpx;
				background: #2F80ED;
				color: #FFFFFF;
				text-align: center;
				font-size: 32rpx;
				position: fixed;
				bottom: 0;
			}
		}
</style>